<template>
	<view 
		class="todo-item" 
		:class="{'completed': todo.status === 1, 'item-expanded': showActions}"
		@touchstart="touchStart"
		@touchmove="touchMove"
		@touchend="touchEnd"
	>
		<view 
			class="item-wrapper"
			:style="{ transform: `translateX(${offset}px)` }"
		>
			<view class="todo-left">
				<view class="circle-check" @tap.stop="toggleStatus">
					<view class="circle" :class="{'checked': todo.status === 1}">
						<view v-if="todo.status === 1" class="checkmark">✓</view>
					</view>
				</view>
			</view>
			<view class="todo-content" @tap="handleTap">
				<view class="todo-title">
					<text>{{todo.userDate || todo.userName}}</text>
				</view>
				<view class="todo-text">
					<text>{{todo.content}}</text>
				</view>
				<view class="todo-time" v-if="todo.time">
					<text>{{todo.time}}</text>
				</view>
			</view>
			<view class="todo-right">
				<view class="todo-handle">
					<view class="handle-row">
						<view class="handle-item" @tap.stop="handleDelete">
							<image class="handle-icon" src="/static/index主页/delete@2x.png"></image>
						</view>
						<view class="handle-item" @tap.stop="handleEdit">
							<image class="handle-icon" src="/static/index主页/edit@2x.png"></image>
						</view>
					</view>
				</view>
				<view class="todo-action">
					<image class="action-icon" src="/static/index主页/编组 6.png" @tap.stop="handleEdit"></image>
				</view>
			</view>
		</view>
		
		<!-- 右下角的操作按钮 -->
		<view class="action-buttons" v-if="showActions">
			<view class="note-button" @tap.stop="handleEdit">
				<image class="note-button-icon" src="/static/index主页/编组 9.png"></image>
			</view>
			<view class="complete-button" @tap.stop="toggleStatus">
				<view class="complete-icon">✓</view>
			</view>
			<view class="delete-button" @tap.stop="handleDelete">
				<image class="delete-button-icon" src="/static/index主页/编组 11.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TodoItem",
		props: {
			todo: {
				type: Object,
				required: true
			},
			index: {
				type: Number,
				required: true
			}
		},
		data() {
			return {
				startX: 0,
				moveX: 0,
				offset: 0,
				showActions: false,
				touchMoveThrottle: false
			}
		},
		methods: {
			touchStart(e) {
				this.startX = e.touches[0].clientX;
			},
			
			touchMove(e) {
				if (this.touchMoveThrottle) return;
				
				this.touchMoveThrottle = true;
				setTimeout(() => {
					this.touchMoveThrottle = false;
				}, 16);
				
				this.moveX = e.touches[0].clientX;
				const moveDistance = this.moveX - this.startX;
				
				// 限制滑动距离在 -100 到 100 之间
				let offset = moveDistance;
				if (offset > 100) offset = 100;
				if (offset < -100) offset = -100;
				
				this.offset = offset;
			},
			
			touchEnd() {
				// 左滑超过50像素或右滑超过50像素 - 显示操作按钮
				if (this.offset < -50 || this.offset > 50) {
					this.showActions = true;
					this.offset = 0;
					// 通知父组件当前项目已被滑动
					this.$emit('slide', this.index);
				} else {
					// 未达到阈值，恢复原位
					this.offset = 0;
					this.showActions = false;
				}
				
				// 重置触摸状态
				this.startX = 0;
				this.moveX = 0;
			},
			
			toggleStatus() {
				// 复制一个新对象以避免直接修改props
				const updatedTodo = { ...this.todo };
				updatedTodo.status = updatedTodo.status === 1 ? 0 : 1;
				
				this.$emit('status-change', {
					todo: updatedTodo,
					index: this.index
				});
				
				// 完成操作后关闭操作按钮
				this.showActions = false;
			},
			
			handleEdit() {
				this.$emit('edit', {
					todo: this.todo,
					index: this.index
				});
				
				// 完成操作后关闭操作按钮
				this.showActions = false;
			},
			
			handleDelete() {
				this.$emit('delete', {
					index: this.index
				});
				
				// 完成操作后关闭操作按钮
				this.showActions = false;
			},
			
			handleTap() {
				this.$emit('tap', {
					index: this.index
				});
			},
			
			// 重置操作按钮状态
			resetActions() {
				this.showActions = false;
				this.offset = 0;
			}
		}
	}
</script>

<style scoped>
	.todo-item {
		width: 100%;
		display: flex;
		padding: 0;
		box-sizing: border-box;
		border-radius: 16rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
		position: relative;
		overflow: hidden;
	}
	
	.item-wrapper {
		width: 100%;
		display: flex;
		padding: 36rpx;
		box-sizing: border-box;
		transition: transform 0.2s ease;
		background-color: #fff;
	}
	
	.todo-item.completed {
		opacity: 0.6;
	}
	
	.todo-item.item-expanded {
		padding-bottom: 70rpx; /* 撑大盒子，为按钮腾出空间 */
	}
	
	.todo-left {
		margin-right: 24rpx;
		display: flex;
		align-items: flex-start;
	}
	
	.circle-check {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.circle {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.checked {
		background-color: #4080ff;
		border-color: #4080ff;
	}
	
	.checkmark {
		color: white;
		font-size: 24rpx;
	}
	
	.todo-content {
		flex: 1;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}
	
	.todo-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 8rpx;
		font-weight: 500;
		line-height: 1.4;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.todo-text {
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
		margin-bottom: 6rpx;
		word-break: break-all;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.todo-time {
		font-size: 22rpx;
		color: #999;
		margin-top: 4rpx;
	}
	
	.todo-right {
		margin-left: auto;
		display: flex;
		align-items: center;
	}
	
	.todo-handle {
		display: flex;
		flex-direction: column;
	}
	
	.handle-row {
		display: flex;
	}
	
	.handle-item {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 16rpx;
	}
	
	.handle-icon {
		width: 36rpx;
		height: 36rpx;
	}
	
	.todo-action {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.action-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}
	
	/* 右下角的操作按钮 */
	.action-buttons {
		position: absolute;
		bottom: 15rpx;
		right: 20rpx;
		display: flex;
		justify-content: flex-end;
		z-index: 2;
	}
	
	.note-button, .delete-button {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: transparent;
		border: none;
	}
	
	.complete-button {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
	}
	
	.note-button-icon, .delete-button-icon {
		width: 32rpx;
		height: 32rpx;
	}
	
	.complete-icon {
		font-size: 28rpx;
		font-weight: bold;
	}
</style> 